<template>
  <div class="app-container">
    <SearchBar :options="options" @change="searchChange" />

    <!-- 表格区域 -->
    <el-table 
      :data="list" 
      :loading="loading" 
      border
      style="margin-top: 20px"
    >
      <el-table-column label="房间" min-width="180">
        <template #default="{ row }">
          {{ row.room.buildingName }}{{ row.room.name }}
        </template>
      </el-table-column>
      <el-table-column label="租期" min-width="200">
        <template #default="{ row }">
          {{ row.checkInStart }} - {{ row.checkInEnd }}
        </template>
      </el-table-column>
      <el-table-column label="分组" prop="room.groupName" min-width="120" />
      <el-table-column label="已收" min-width="100">
        <template #default="{ row }">
          <span class="text-primary">{{ row.completeCount }}笔</span>
        </template>
      </el-table-column>
      <el-table-column label="已收金额" min-width="120">
        <template #default="{ row }">
          <span class="text-success">{{ row.completePrice }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="待收" min-width="100">
        <template #default="{ row }">
          <span class="text-warning">{{ row.incompleteCount }}笔</span>
        </template>
      </el-table-column>
      <el-table-column label="待收金额" min-width="120">
        <template #default="{ row }">
          <span class="text-danger">{{ row.incompletePrice }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        v-show="total > 0"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="val => { queryParams.pageSize = val; getList() }"
        @current-change="val => { queryParams.pageNum = val; getList() }"
      />
    </div>

    <!-- 详情弹窗 -->
    <LodgingDetail 
      v-if="lodgingDetailVisible" 
      :visible="lodgingDetailVisible" 
      @cancel="() => lodgingDetailVisible = false" 
    />
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  background-color: var(--el-bg-color);
  padding: 20px;
  border-radius: 4px;

  .el-table {
    border-radius: 4px;
    
    :deep(.el-table__header) {
      th {
        background-color: var(--el-fill-color-light);
        color: var(--el-text-color-regular);
        font-weight: 500;
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    padding: 10px 20px;
    text-align: right;
  }
}

// 状态文字颜色
.text-primary {
  color: var(--el-color-primary);
}
.text-success {
  color: var(--el-color-success);
}
.text-warning {
  color: var(--el-color-warning);
}
.text-danger {
  color: var(--el-color-danger);
}
</style>

<script setup name="RoomSummaryPane">
import SearchBar from '../component/searchBar.vue'
import LodgingDetail from '@/views/room/component/lodgingDetail/index.vue'
import billApi from '@/api/room/bill'

const options = ref({
  group: true,
  subType: true,
  searchStr: true,
})
const lodgingDetailVisible = ref(false)
const list = ref([])
const loading = ref(false)
const total = ref(0)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
})
const { queryParams } = toRefs(data)

/* 搜索栏变化 */
function searchChange(form) {
  loading.value = true
  queryParams.value = { ...queryParams.value, ...form }
  getList()
}

function handleDetail() {
  lodgingDetailVisible.value = true
}

function getList() {
  loading.value = true
  billApi.getRoomSummaryList({
    ...queryParams.value
  }).then(res => {
    total.value = res.total
    list.value = res.rows
  }).finally(() => {
    loading.value = false
  })
}

getList()
</script>